u-fit/frontend/pages/p/[id].tsx

import {useRouter} from "next/router"

const ProtectedPage = () => {
  const router = useRouter()
  return(
      <section>
      {typeof router.query.id === 'string' && router.query.id === '3TiwWdeTa1145' ? (
        <>
        <h2>Les Mills HIIT Beyond</h2>
        <iframe 
          width="640" 
          height="360"
          src="https://www.youtube.com/embed/oez2w7c1RPE"
          frameBorder="0"
          allowFullScreen
        />
        </>) : '🤦‍♀️'}
      </section>
  )
}

export default ProtectedPage